import React, { Component } from 'react';
import classnames from 'classnames';
import SectionToChinese from 'shared/utils/SectionToChinese.js'
import moment from 'moment';
import groupBy from 'lodash/groupBy';
import Icon from 'shared/components/base/Icon';
import { fetchOrderDetailApi,fetchExpresslApi } from '../../api';
import './logistics.less';

class Logistics extends Component {
  constructor(props){
    super(props)
    this.state = {
      resData:{productlist:[]},
      expressData:[]
    }
  }

  componentWillReceiveProps(props){
    if(props.show){
      fetchOrderDetailApi({order_id:props.id}).then((res)=>{
        if(res.code === 1000){
          this.setState({resData:res.data})
        }
      })
      fetchExpresslApi({order_id:props.id}).then((res)=>{
        if(res.code === 1000){
          this.setState({expressData:[Object.values(res.data)]})
        }
      })
    }
  }
  render() {
    const { resData,expressData } = this.state;
    const pro = resData.productlist || [];
    const { show, LogisticsHide } = this.props;
    const showSty = classnames({
      'animate-slide-down':!show,
      'animate-slide-up':show,
    })
    const hidebox = classnames({
      'logistics':true,
      'hide':!show,
    })
    return (
      <div className={hidebox}>
        <div className={showSty}>
          <div className="logistics-item">
            <span className="closeX" onClick={LogisticsHide}><Icon type="close" /></span>
            <div>
              {/* <div className="logistics-item-head"><span> 送货方式：</span>{expressData.expName}  <br /><span className="mt-span">货运单号：{<expressData className=""></expressData>number}</span></div> */}
              {
                pro.map((item,i)=>(
                  <div className="logistics-item-main" key={i}>
                    <div className="imgbox">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="info">
                      <div>佳能（Canon）{item.title}</div>
                      {/* <div><span>尺码：</span>机身</div> */}
                      <div><span>单价：</span>¥{item.price}</div>
                      <div><span>数量：</span>{item.quantity}</div>
                      {/* <div><span>重量：</span>{item.weight}</div> */}
                    </div>
                  </div>
                ))
              }

            </div>
          </div>


          {
            expressData.map((item,i)=>{
              const express = groupBy(item.list, (s)=> {
                return moment(s.time).format('YYYY-MM-DD')
              })
              return(
                <div className="logistics-list" key={`${i}s`}>
                  <div className='express'><span>货运单号：</span><span>{item.number}</span></div>
                  {
                    Object.keys(express).map((key,ii)=>{
                      return(
                        <div key={`${ii}ss`}>
                          <div className="list-time">{`${key}/周${SectionToChinese(new Date(key).getDay()) || '日'}`}</div>
                          <div className="list-process">
                            {
                              express[key].map((it,k)=>(
                                <div key={k}>
                                  <span>{it.time.split(' ')[1]}</span>
                                  <span>{it.status}</span>
                                </div>
                              ))
                            }
                          </div>
                        </div>
                      )
                    })
                  }
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default Logistics;
